<template>
  <div class="app-container">

    <div class="top">
      <el-input
        v-model="kwInput"
        placeholder="输入 网站域名或者目录名称 进行筛选"
        class="input-with-select"
        clearable
        @keyup.native.enter="handleSearch"
      >
        <el-button slot="append" icon="el-icon-search" :disabled="listLoading" @click="handleSearch">搜索</el-button>
      </el-input>
    </div>

    <div style="float: right;margin-bottom: 4px; margin-right: 4px;">
      <el-button size="mini" @click="location2export">产品导出</el-button>
    </div>

    <div class="mt-content">
      <el-table v-loading.body="listLoading" :data="data" border fit highlight-current-row style="width: 100%">

        <el-table-column align="center" width="100" prop="id" label="id" />

        <el-table-column align="center" label="站点A" prop="webA__domain" />

        <el-table-column align="center" label="目录A" prop="categoryA" show-overflow-tooltip />

        <el-table-column align="center" label="站点B" prop="webB__domain" />

        <el-table-column align="center" label="目录B" prop="categoryB" show-overflow-tooltip />

        <el-table-column align="center" label="更新时间" prop="update_at" />

        <el-table-column align="center" label="操作" width="120">
          <template slot-scope="scope">
            <el-button size="mini" type="primary"@click="handleClickViewDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination
        v-if="data.length"
        background
        class="mt-pagination"
        :current-page="page"
        :page-sizes="[10,20,50,100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script>
import { compare_history_dt } from '@/api/erp/compare'

export default {
  data() {
    return {
      kwInput: '',
      listLoading: false,

      loading: false,
      data: [],
      total: 0,
      page: 1,
      pagesize: 10
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      compare_history_dt({
        kw: this.kwInput,
        pagesize: this.pagesize,
        page: this.page
      })
        .then(response => {
          this.data = response.data.data
          this.listLoading = false
          this.total = response.data.total
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    handleClickViewDetail(item) {
      const link = this.$router.resolve({
        name: 'crawl_compare',
        query: {
          wa: item.webA_id,
          ca: item.categoryA,
          wb: item.webB_id,
          cb: item.categoryB
        }
      })
      window.open(link.href, '_self')
    },
    location2export() {
      const link = this.$router.resolve({
        name: 'erp.productExport2',
        params: {
          src: 'crawl',
          process_type: '1'
        }
      })
      window.open(link.href, '_self')
    }// methods end
  }
}
</script>

<style scoped>
  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 30px;
    margin-top: 20px;
  }
</style>
